import { reactive, onMounted, defineComponent, toRefs, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import driverApi from '@/api/inwarehouse/driver-api'
import ZlrtTable from '@/components/zlrt-table/table.vue'
import ZlrtSearch from '@/components/zlrt-search/search.vue'
import TableContext from '@/components/zlrt-table/table-context'

export default defineComponent({
  components: {
    ZlrtTable,
    ZlrtSearch
  },
  setup() {

    const ctx = reactive(new TableContext(getCurrentInstance(), {
      title: '车辆',
      api: driverApi,
      columns: [
        { prop: 'plateNumber', label: '车牌号', valueType: 'input' },
        { prop: 'driverName', label: '车主', valueType: 'input' },
        { prop: 'driverTel', label: '联系方式', valueType: 'input' },
        { prop: 'drivingLicenseImg', label: '驾驶证', slot: true },
        { prop: 'vehicleLicenseImg', label: '行驶证', slot: true },
        { prop: 'insuranceImg', label: '保险单', slot: true },
        { prop: 'operation', label: '操作', slot: true }
      ],
      rules: {
        plateNumber: [{ required: true, message: '请输入车牌', trigger: 'blur' }],
        driverName: [{ required: true, message: '请输入车主', trigger: 'blur' }],
        driverTel: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
      }
    }))

    const data = reactive({
      ctx
    })

    // init
    onMounted(() => {
      ctx.loadData()
    })

    return {
      ...toRefs(data)
    }
  }
})
